<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>单页面应用</title>
		<link rel="stylesheet" href="./css/login.css" />
	</head>
	<body>
		<script type="module">
			import { routes } from './js/routes.js'

			/**
			 * 添加路由，默认home
			 */
			const router = () => {
				const url = location.hash.slice(1) || 'login' // 获取hash值
				const rootEle = document.body // 路由输出根节点
				rootEle.innerHTML = '' //清空原内容
				const childEle = routes.find(item => item.path == url).page // 查找路由组件
				// 添加路由组件
				rootEle.appendChild(childEle)
			}

			router() //初始化

			// hash路由切换监听,hash值变化触发
			window.addEventListener('hashchange', router)
		</script>
	</body>
</html>
